<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 70px;
            margin: 0 auto;
        }
        .lis{
            width: 110px;
            margin: 0 auto;
            display: none;
        }
      .lis li{
          width: 60px;
        border: 1px solid lightblue;
        list-style: none;
        cursor: pointer;
        
      }
      .lis li:hover{
          background-color: pink;
      }
      .cov{
          width: 100%;
          height: 100%;
      }
    </style>
</head>
<body>
    <div class="cov">
    <div>
        <button class="btn">输入法</button>
    </div>
    
   
        <ul class="lis">
            <li class="li1">手写</li>
            <li class="li2">拼音</li>
            <li class="li3">关闭</li>
        </ul>
</div>
    <script>
       var li1 = document.querySelector('.li1');
       var li2 = document.querySelector('.li2');
       var li3 = document.querySelector('.li3');
       var lis = document.querySelector('.lis');
       var btn = document.querySelector('.btn');

       

       
       li1.onclick = function(){
           lis.style.display='none';
        }
        li2.onclick = function(){
           lis.style.display='none';
        }
        li3.onclick = function(){
           lis.style.display='none';
        }

        btn.onclick = function(){
           lis.style.display='block';
           event.stopImmediatePropagation();
        }
        document.onclick=function(){
            lis.style.display='none';
           
        }
    </script>
</body>
</html>